<template>
  <div class="container">
    <div class="heade">
      <div class="header">
        <span class="text">基本信息</span>
      </div>
      <div class="heade-text">
        <el-form ref="form1" :model="form1" label-width="80px" class="heade-form">
          <el-form-item label="进货仓库">
            <el-select
              v-model="form1.warehouseId"
              placeholder="请选择仓库"
              style="width: 160px">
              <el-option label="A仓库" value="A仓库"></el-option>
              <el-option label="B仓库" value="B仓库"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供货厂商">
            <el-select
              v-model="form1.vendorName"
              placeholder="请选择厂商"
              style="width: 160px">
              <el-option label="娃哈哈" value="娃哈哈"></el-option>
              <el-option label="统一" value="统一"></el-option>
              <el-option label="康师傅" value="康师傅"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="between">
      <div class="header">
        <span class="text">选择商品</span>
      </div>
      <div class="heade-text">
        <el-form
          ref="form2"
          :model="form2"
          label-width="80px"
          class="heade-select" >
          <el-form-item label="选择品牌">
            <el-select
              v-model="form2.brand"
              placeholder="请选择品牌"
              style="width: 160px" >
              <el-option label="伊利" value="特仑苏"></el-option>
              <el-option label="蒙牛" value="蒙牛"></el-option>
              <el-option label="104" value="104"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择分类">
            <el-select
              v-model="form2.goodsType"
              placeholder="请选择分类"
              style="width: 160px" >
              <el-option label="1" value="1"></el-option>
              <el-option label="食品类" value="食品类"></el-option>
              <el-option label="牛奶" value="牛奶"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品标题">
            <el-input v-model="form2.name" style="width: 160px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="searchGoods">搜索</el-button>
          </el-form-item>
        </el-form>
        <div class="result">
          <div class="header">
            <span class="text">搜索结果</span>
          </div>
          <div class="between-table">
            <el-table
              :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
              :cell-style="{ fontSize: '12px', textAlign: 'center' }"
              ref="multipleTable"
              :data="tableList"
              border
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange" >
              <el-table-column label="商品名称" width="160">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column prop="lunit" label="大单位" width="160" ></el-table-column>
              <el-table-column prop="luSupplyPrice" label="大单位单价" ></el-table-column>
              <el-table-column prop="sunit" label="小单位"></el-table-column>
              <el-table-column prop="suSupplyPrice" label="小单位单价" width="160"></el-table-column>
              <el-table-column label="现有库存">
                <template slot-scope="scope">{{scope.row.number}} </template></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <button class="column" @click="add(scope.row)">添加</button>
                </template>
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="totalItems">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="end">
        <div class="header">
          <span class="text">商品明细</span>
        </div>
        <div class="between-table">
          <el-table
            :header-cell-style="{ fontSize: '14px', textAlign: 'center' }"
            :cell-style="{ fontSize: '12px', textAlign: 'center' }"
            :row-class-name="'fixed-row-height'"
            ref="multipleTable"
            :data="tableData2"
            border
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column label="商品名称" width="160">
              <template slot-scope="scope">{{  scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="单价/大单位" width="160">
              <template slot-scope="scope">{{scope.row.luSupplyPrice+'/'+scope.row.lunit }}</template>
            </el-table-column>
            <el-table-column label="数量" width="160">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.num1"
                  :min="0"
                  :max="999"
                  size="small"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="单价/小单位">
              <template slot-scope="scope">{{scope.row.suSupplyPrice+'/'+scope.row.sunit  }}</template>
            </el-table-column>
            <el-table-column label="数量" width="160">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.num2"
                  :min="0"
                  :max="999"
                  size="small"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column v-model="total" label="金额">
              <template slot-scope="scope">{{scope.row.total}}</template>
            </el-table-column>
            <el-table-column prop="option" label="操作">
              <template slot-scope="scope">
                  <button class="column" @click="del(scope.row)">删除</button>
                </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="foot">
          <span>商品共：</span>
          <span>{{this.tableData2.length}}</span>
          <span class="sum">金额合计：</span>
          <span>{{sum}}</span>
          <span>元</span>
          <el-button type="success" style="margin: 20px; position: relative; left: 600px" @click="submit">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created(){
    this.getData();
    this.quireData();
    this.basicInformation = this.$route.query.data;
    this.form1.vendorName=this.basicInformation.vendorName;
    this.form1.warehouseId=this.basicInformation.createTime;
    console.log("wos1djd",this.basicInformation);
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示的条数
      totalItems: 0, // 总条数，根据实际情况进行设置
      tableList: [],
      searchResults: [],
      FormList: [],
      sum: 0,
      basicInformation:{},
      form1: {
        vendorName: '',
        warehouseId: '',
      },
      form2:{
        brand:'',
        goodsType:'',
        name: ''
      },
      tableList:[],
      tableData1: [
        {name: '农夫山泉',lunit:'箱',luSupplyPrice: 100,sunit:'瓶',suSupplyPrice: 10,number: 12,total:120, conversionRatio:12},
        {name: '农夫',lunit:'箱',luSupplyPrice: 100,sunit:'瓶',suSupplyPrice: 10,number: 12,total:120, conversionRatio:12}
      ],
      tableData2: [],
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //实施分页
    getData() {
      this.tableList=[];
      //第一步：当前页的第一条数据在总数据中的位置
      let strlength = (this.currentPage - 1) * this.pageSize + 1;
      //第二步：当前页的最后一条数据在总数据中的位置
      let endlength = this.currentPage * this.pageSize;
      //第三步：此判断很重要，执行时机：当分页的页数在最后一页时，进行重新筛选获取数据时
      //获取本次表格最后一页第一条数据所在的位置的长度
      let resStrLength=0
      if(this.tableData1.length % this.pageSize == 0){
        resStrLength = (parseInt(this.tableData1.length / this.pageSize)-1) * this.pageSize + 1
      }else{
        resStrLength = parseInt(this.tableData1.length / this.pageSize) * this.pageSize + 1
      }
      //如果上一次表格的最后一页第一条数据所在的位置的长度 大于 本次表格最后一页第一条数据所在的位置的长度，则将本次表格的最后一页第一条数据所在的位置的长度 为最后长度
      if(strlength>resStrLength){
        strlength=resStrLength
      }
      //第四步：此判断很重要，当分页的页数切换至最后一页，如果最后一页获取到的数据长度不足最后一页设置的长度，则将设置的长度 以 获取到的数据长度 为最后长度
      if (endlength > this.tableData1.length) {
        endlength = this.tableData1.length;
      }
      //第五步：循环获取当前页数的数据，放入展示的数组中
      for (let i = strlength - 1; i < endlength; i++) {
        this.tableList.push(this.tableData1[i]);
      }
      //数据的总条数
      this.totalItems = this.tableData1.length;
    },
    //切换页数，执行方法
    handleCurrentChange(val) {
      this.currentPage=val
      this.getData()  
    },
    add(data){
      this.tableData2.push(data);
      return this.tableData2.map(item => {
        return {
          ...item,
          num1: null,
          num2: null,
        }
    })
    console.log("tableData2",this.tableData2);
      
    },
    del(a){
      // 使用splice方法从数组中删除该值
      let indexToRemove = this.tableData2.indexOf(a);
      if (indexToRemove !== -1) {
        this.tableData2.splice(indexToRemove, 1);
      }
    },
    //querySearch(queryString, cb) {
        // 模拟异步查询
    //  setTimeout(() => {
      // 根据输入的值进行模糊查询，并将结果传递给回调函数
    //    const results = this.mockData.filter(item =>
    //      item.value.toLowerCase().includes(queryString.toLowerCase())
    //    );
    //    cb(results);
    //  }, 200);
    //},
    handleSelect(item) {
      // 处理选中结果的逻辑
      this.form.vendorName=item.value;
    },
    //根据用户输入进行查询商品
    async searchGoods(){
      this.tableData1 = []
      const {data:res} = await this.$http.get("/goods/queryGoodsUnitInfoBySel",{
        params:{
          brandName:this.form2.brand,
          goodsType:this.form2.goodsType,
          goodsName:this.form2.name,
        }
      });
      // console.log(res);
      if(res.code == 0){
        this.tableData1 = res.data;
        this.getData();
      }else{
        this.$message.error(res.message);
      }  
    },
    async quireData(){
      //    访问后端接口，实现查询所有商品
      const {data:resp} = await this.$http.get("/goods/queryGoodsUnitInfo");
      if(resp.code == 0){
        this.tableData1 = resp.data
        console.log(resp.data);
        this.getData();
      }else{
        this.$message.error(resp.message);
      }  
    },
    async submit(){
      this.$message.success("提交成功");
    }
  },
  //mounted(){
  //  this.mockData = [ 
  //    { value: '娃哈哈' },
  //    { value: '康师傅' },
  //    { value: '统一' },
  //    { value: '娃哈哈厂商' },
  //    { value: '中沃' },
  //    { value: '百岁山' },
  //    { value: '蓝关' },
  //    { value: '华为' },
  //    { value: '小米' },
  //    { value: '苹果' }
  //  ];
  //},
  watch: {
  tableData2: {
    handler(newData) {
      newData.forEach(item => {
        item.total = Number(item.num1)*Number(item.luSupplyPrice)+Number(item.num2)*Number(item.suSupplyPrice)
        this.sum = newData.reduce((sum, item) => sum + item.total, 0);
      })
    },
    deep: true
  }
}
}
</script>

<style scoped>
.column{
    text-decoration: none;
    color: #1ABC9C;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}
.heade-text {
  border: 1px solid rgba(228, 228, 228, 1);
  text-align: center;
}
.heade-form {
  display: flex;
  position: relative;
  top: 12px;
}
.heade-select {
  display: flex;
  position: relative;
  top: 25px;
}
.text {
  font-size: 14px;
  position: absolute;
  left: 12px;
}
.info1 {
  font-size: 14px;
  position: absolute;
  right: 70px;
  top: 14px;
}
.info {
  font-size: 14px;
  position: absolute;
  right: 12px;
  top: 14px;
}
.header {
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(243, 243, 243, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}
.between .header {
  margin-top: 20px;
}
.column {
  font-size: 14px;
  margin-right: 5px;
}
.result {
  padding: 15px;
}
.end span {
  font-size: 14px;
  margin: 10px 0 10px 0;
}
.fixed-row-height {
  height: 50px;
}
.sum{
    margin-left: 20px !important;
}
.foot{
  border: 0 solid rgba(228, 228, 228, 1);
  border-width: 0 1px 1px 1px;
}
</style>